<template>
  <div class="employee-list">
    <a-card title="员工列表" class="list-card">
      <template #extra>
        <a-button type="primary" @click="goToAdd">添加员工</a-button>
      </template>

      <div class="search-bar">
        <a-input-search
            v-model:value="searchKeyword"
            placeholder="输入姓名或工号搜索"
            @search="handleSearch"
            style="width: 300px"
        />
      </div>

      <a-spin :spinning="loading">
      <a-table
          :columns="columns"
          :data-source="employeeData"
          :pagination="pagination"
          :loading="loading"
          @change="handleTableChange"
          row-key="id"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'gender'">
            {{ record.gender === 1 ? '男' : '女' }}
          </template>
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status === 1 ? 'green' : 'red'">
              {{ record.status === 1 ? '在职' : '离职' }}
            </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a-button size="small" @click="viewDetail(record.id)">查看</a-button>
              <a-button size="small" @click="editEmployee(record.id)">编辑</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
      </a-spin>
    </a-card>
  </div>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { getEmployeeList } from '@/api/employee'

const router = useRouter()

// 监听路由变化，当从添加页面返回时刷新数据
watch(
    () => router.currentRoute.value,
    (to, from) => {
      if (from.path === '/employee/add' && to.path === '/employee/list') {
        fetchEmployees()
      }
    }
)

// 分页变化处理
const handleTableChange = (pag) => {
  pagination.value = {
    ...pagination.value,
    current: pag.current,
    pageSize: pag.pageSize
  }
  fetchEmployees()
}

// 表格列配置
const columns = [
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '工号',
    dataIndex: 'employeeId',
    key: 'employeeId'
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender'
  },
  {
    title: '部门',
    dataIndex: 'department',
    key: 'department'
  },
  {
    title: '职位',
    dataIndex: 'position',
    key: 'position'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '操作',
    key: 'action',
    width: '150px'
  }
]

// 数据状态
const employeeData = ref([])
const loading = ref(false)
const searchKeyword = ref('')
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true
})

// 获取员工列表
const fetchEmployees = async () => {
  loading.value = true
  try {
    const res = await getEmployeeList({
      page: pagination.value.current,
      pageSize: pagination.value.pageSize,
      keyword: searchKeyword.value
    })
    employeeData.value = res.data.data.list
    // pagination.value.total = res.data.total
    // 确保更新总条数
    pagination.value = {
      ...pagination.value,
      total: res.data.total
    }
  } catch (error) {
    message.error('获取员工列表失败')
    console.error('完整错误信息:', error.response || error) // 更详细的错误日志
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.value.current = 1
  fetchEmployees()
}

// 查看详情
const viewDetail = (id) => {
  router.push(`/employee/detail/${id}`)
}

// 编辑员工
const editEmployee = (id) => {
  router.push(`/employee/edit/${id}`)
}

// 跳转到添加页面
const goToAdd = () => {
  router.push('/employee/add')
}

// 初始化加载数据
onMounted(() => {
  fetchEmployees()
})
</script>

<style scoped>
.employee-list {
  padding: 20px;
}

.list-card {
  border-radius: 8px;
}

.search-bar {
  margin-bottom: 20px;
}
</style>